<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Carousel Widget: Spotlight Example</title>
        <!-- Some basic styles for all examples -->
        <link type="text/css" rel="stylesheet" href="css/common.css">
        <!-- Style the container, and set dimensions for the list items -->
        <link type="text/css" rel="stylesheet" href="css/carousel.css">
        <!-- Dependencies -->
        <link type="text/css" rel="stylesheet"
              href="../../build/logger/assets/skins/sam/logger.css">
        <link type="text/css" rel="stylesheet"
              href="../../build/carousel/assets/skins/sam/carousel.css">
        <script src="../../build/yahoo/yahoo-debug.js"></script>
        <script src="../../build/dom/dom-debug.js"></script>
        <script src="../../build/event/event-debug.js"></script>
        <script src="../../build/logger/logger-debug.js"></script>
        <script src="../../build/element/element-beta-debug.js"></script>
        <script src="../../build/carousel/carousel-beta-debug.js"></script>
        <!-- Styles specific for this example only. -->
        <style type="text/css">
            /* Style the spotlight container */
            #spotlight {
                border: 1px solid #ccc;
                height: 180px;
                margin: 10px auto;
                padding: 1px;
                width: 240px;
            }

            #container {
                margin: 0 auto;
            }

            .yui-carousel-element li {
                height: 75px;
                opacity: 0.6;
                width: 75px;
            }

            .yui-carousel-element .yui-carousel-item-selected {
                opacity: 1;
            }
        </style>
        <script>
            (function () {
                var myLogReader, carousel;
                
                // Get the image link from within its (parent) container.
                function getImage(parent) {
                    var el = parent.firstChild;
                    
                    while (el) { // walk through till as long as there's an element
                        if (el.nodeName.toUpperCase() == "IMG") { // found an image
                            // flickr uses "_s" suffix for small, and "_m" for big
                            // images respectively
                            return el.src.replace(/_s\.jpg$/, "_m.jpg");
                        }
                        el = el.nextSibling;
                    }
                    
                    return "";
                }
                
                YAHOO.util.Event.onDOMReady(function (ev) {
                    var el, item,
                        myLogReader = new YAHOO.widget.LogReader(),
                        spotlight   = YAHOO.util.Dom.get("spotlight"),
                        carousel    = new YAHOO.widget.Carousel("container", {
                                isVertical: true
                        });
                        
                    carousel.render(); // get ready for rendering the widget
                    carousel.show();   // display the widget
                    
                    // display the first selected item in the spotlight
                    item = carousel.getElementForItem(
                            carousel.get("selectedItem"));
                    if (item) {
                        spotlight.innerHTML = "<img src=\"" +
                                getImage(item) + "\">";
                    }
                       
                    carousel.on("itemSelected", function (index) {
                        // item has the reference to the Carousel's item
                        item = carousel.getElementForItem(index);

                        if (item) {
                            spotlight.innerHTML = "<img src=\""
                                    + getImage(item) + "\">";
                        }
                    });
                });
            })();
        </script>
    </head>
    <body class="yui-skin-sam">
        <div id="main">
            <div class="promo">
                <h1>Carousel Widget: Spotlight Example</h1>
                <div class="intro">
                    <p>
                        This example uses the YUI Carousel Widget to showcase a
                        simple spotlight example using its "itemSelected"
                        event.  In this example, you can use arrow keys to
                        select items, as well as click on an item to select it.
                    </p>
                    <p>
                        Though this functionality looks a little complicated, it
                        is very easy to implement.  This is because the YUI
                        Carousel Widget handles the keyboard event and the mouse
                        click event for setting the selection.  When an item is
                        selected, the YUI Carousel Widget triggers a
                        "itemSelected" event.  This example subscribes to the
                        "itemSelected" event to display the selected image.
                    </p>
                </div>
                <div class="example-container">
                    <!-- The Carousel container -->
                    <div id="container">
                        <ol id="carousel">
                            <li>
                                <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
                            </li>
                        </ol>
                    </div>
                    <!-- The spotlight container -->
                    <div id="spotlight"></div>
                </div>
            </div>
            <h2>Using the Carousel Widget for spotlight example</h2>
            <p>
                Here we will use the YUI Carousel Widget's "itemSelected"
                event to display the selected image.
            </p>
            <p>
                This example has the following dependencies:
            </p>
<textarea rows="5" cols="110" readonly>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>
</textarea>
            <p>
                This example uses progressive enhancement.  So, the Carousel is
                created from an "ordered" list of elements.
            </p>
<textarea rows="31" cols="110" readonly>
<div id="container">
  <ol>
    <li>
      <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
    </li>
  </ol>
</div>
</textarea>
            <p>
                We will add a container where we would display the spotlight
                image.
            </p>
<textarea rows="1" cols="110" readonly>
<div id="spotlight"></div>
</textarea>
            <p>
                We'll have only one CSS rule to set the height for the Carousel
                items.
            </p>
<textarea rows="3" cols="110" readonly>
.yui-carousel-element li {
    height: 75px;
    width: 75px;
}
</textarea>
            <p>
                Since we have the elements in place, we can invoke the
                Carousel's constructor to create the widget.  The Carousel's
                "selectedItem" property returns the index of the currently
                selected item.  So, using that property and the
                getElementForItem() API we can display the image of the
                selected item when the Carousel is rendered.
            </p>
<textarea rows="8" cols="110" readonly>
YAHOO.util.Event.onDOMReady(function (ev) {
  var carousel = new YAHOO.widget.Carousel("container");
  carousel.render(); // get ready for rendering the widget
  carousel.show();   // display the widget
  // display the first selected item in the spotlight
  spotlight.innerHTML = "<img src=\"" +
    getImage(carousel.getElementForItem(carousel.get("selectedItem"))) + "\">";
}
</textarea>
            <p>
                Now, we can subscribe to the "selectedItem" event that the
                Carousel exposes.  This event is triggered whenever an item is
                selected and it returns the index of the selected item.  With
                the index of the item, we can use the Carousel's
                getElementForItem() API to get the reference to the Carousel's
                item (LI in our case).
            </p>
<textarea rows="4" cols="110" readonly>
carousel.on("itemSelected", function (index) {
  // item has the reference to the Carousel's item
  var item = carousel.getElementForItem(index);
});
</textarea>
            <p>
                Once the reference to the Carousel's item is obtained, it is
                straight-forward to implement a function that extracts the
                image within it.
            </p>
<textarea rows="15" cols="110" readonly>
// Get the image link from within its (parent) container.
function getImage(parent) {
  var el = parent.firstChild;
  
  while (el) {  // walk through till as long as there's an element
    if (el.nodeName.toUpperCase() == "IMG") { // found an image
      // flickr uses "_s" suffix for small, and "_m" for big images respectively
      return el.src.replace(/_s\.jpg$/, "_m.jpg");
    }
    el = el.nextSibling;
  }
  
  return "";
}
</textarea>
            <p>
                Lets assemble everything together.  The full JavaScript reads
                as follows:
            </p>
<textarea rows="35" cols="110" readonly>
(function () {
  var myLogReader, carousel, spotlight;
  
  function getImage(parent) {
    var el = parent.firstChild;
    
    while (el) {
      if (el.nodeName.toUpperCase() == "IMG") {
        return el.src.replace(/_s\.jpg$/, "_m.jpg");
      }
      el = el.nextSibling;
    }
    
    return "";
  }
  
  YAHOO.util.Event.onDOMReady(function (ev) {
    var myLogReader = new YAHOO.widget.LogReader(),
        spotlight   = YAHOO.util.Dom.get("spotlight"),
        carousel    = new YAHOO.widget.Carousel("container");
        
    carousel.render();
    carousel.show();
    
    spotlight.innerHTML = "<img src=\"" +
      getImage(carousel.getElementForItem(carousel.get("selectedItem"))) +
      "\">";
      
    carousel.on("itemSelected", function (index) {
      var item = carousel.getElementForItem(index);
      
      spotlight.innerHTML = "<img src=\"" + getImage(item) + "\">";
    });
  });
})();
</textarea>
        </div>
    </body>
</html>
